<template>
	<div>
		<r-search :searchForm="searchForm" :searchHandle="searchHandle" :searchData="searchData" />
		<r-table
			:tableHandles="tableHandles"
			:isSelection="false"
			:isIndex="false"
			:isPagination="true"
			:tableData="tableData"
			:tableCols="tableCols"
			:tablePage="tablePage"
			:isHandle="true"
			@refresh="init()"
		></r-table>
		<r-form :formRules="formRules" :formHandle="formHandle" :formData="formData" :formCols="formCols" ref="elForm" labelWidth="200px" dialogWidth="800px" :isHandle="true" />

		<Associated_vehicles :res="Associated_devices_data" v-if="Associated_devices_data.show" v-on:Associated_devices_call="Associated_devices_call"></Associated_vehicles>
	</div>
</template>
<script>
import Associated_vehicles from './cus/Associated_vehicles'
export default {
	components: {
		Associated_vehicles
	},
	data() {
		var checkAge = (rule, value, callback) => {
			setTimeout(() => {
				if (isNaN(value)) {
					callback(new Error('请输入数字值'))
				} else {
					if (value < 0) {
						callback(new Error('不能小于0'))
					} else {
						callback()
					}
				}
			}, 200)
		}
		return {
			Associated_devices_data: {
				show: false,
				id: ''
			},
			searchData: {
				btType: ''
			},
			searchForm: [
				{
					type: 'select',
					prop: 'btType',
					placeholder: '电池类型',
					width: 150,
					options: [{ label: '48V', value: '48' }, { label: '60V', value: '60' }, { label: '72V', value: '72' }]
				}
				// {
				//   type: 'input',
				//   prop: 'name',
				//   placeholder: '更换次数',
				//   width: 150
				// },
			],
			searchHandle: [
				{
					label: '搜索',
					type: 'success',
					icon: 'el-icon-search',
					handle: e => this.init()
				}
			],

			tableHandles: [
				{
					label: '新增套餐',
					type: 'primary',
					handle: e => this.elFormVisible()
				}
			],
			tableData: [],
			tableCols: [
				{
					label: '序号',
					prop: 'id'
				},
				{
					label: '租车套餐名',
					prop: 'mealName'
				},
				{
					label: '套餐费用',
					prop: 'price'
				},
				{
					label: '有效时长',
					prop: 'days'
				},
				{
					label: '更换次数',
					prop: 'num'
				},
				{
					label: '电池类型',
					prop: 'btType'
				},
				/* {
					label: '已关联车辆',
					prop: 'giftMoney'
				}, */
				{
					label: '更新时间',
					prop: 'ctime'
				},
				{
					label: '启用状态',
					type: 'switch',
					prop: 'status',
					values: [1, 2],
					change: row => this.changestate(row)
				},

				{
					label: '操作',
					type: 'button',
					width: 300,
					btnList: [
						{
							label: '已关联车辆',
							type: 'primary',
							handle: row => {
								this.Associated_devices_data.id = row.id
								this.Associated_devices_data.show = true
							}
						},
						{
							label: '编辑',
							type: 'primary',
							handle: row => this.elFormDetail(row)
						},
						{
							label: '删除',
							type: 'primary',
							handle: row => this.del(row)
						}
					]
				}
			],
			tablePage: { limit: 10, page: 1, total: 0 },
			formData: {
				mealName: '',
				btType: '',
				days: '',
				num: '',
				price: ''
			},
			formCols: [
				{ type: 'input', label: '租车套餐名称', width: 350, prop: 'mealName' },
				{
					type: 'select',
					label: '车辆电池类型',
					width: 350,
					prop: 'btType',
					options: [{ label: '48V', value: '48' }, { label: '60V', value: '60' }, { label: '72V', value: '72' }]
				},
				{ type: 'input', label: '套餐时长', width: 350, prop: 'days', remark: '天' },
				// { type: "select", label: "单位", width: 350, prop: "name" },
				{ type: 'input', label: '电池更换次数', width: 350, prop: 'num' },
				// { type: "input", label: "次数", width: 350, prop: "giftMoney" },
				{ type: 'input', label: '套餐费用', width: 350, prop: 'price', remark: '元' }
			],
			formRules: {
				mealName: [{ required: true, message: '请输入', trigger: 'blur' }],
				btType: [{ required: true, message: '请选择', trigger: 'blur' }],
				days: [{ required: true, message: '请输入', trigger: 'blur' }, { validator: checkAge, trigger: 'blur' }],
				num: [{ required: true, message: '请输入', trigger: 'blur' }, { validator: checkAge, trigger: 'blur' }],
				price: [{ required: true, message: '请输入', trigger: 'blur' }, { validator: checkAge, trigger: 'blur' }]
			},
			formHandle: [
				{
					label: '取消',
					handle: e => this.elFormVisible()
				},
				{
					label: '确定',
					type: 'success',
					handle: e => this.elFormSubmit()
				}
			]
		}
	},
	computed: {},
	mounted() {
		this.init()
	},
	methods: {
		async init() {
			let parm = {
				...this.searchData,
				...{
					pageNum: this.tablePage.page,
					pageSize: this.tablePage.limit
				}
			}
			let res = await this.apis.mealRent_list(parm)
			if (res) {
				this.tableData = res.rows || []
				this.tablePage.total = res.total
			}
		},
		async elFormSubmit() {
			this.$refs.elForm.$refs.ruleForm.validate(async valid => {
				if (valid) {
					if (this.formData.id) {
						const res = await this.apis.mealRent_updata({ ...this.formData })
					} else {
						const res = await this.apis.mealRent_save({ ...this.formData })
					}
					this.elFormVisible()
					this.init()
				}
			})
		},
		async changestate(row) {
			const res = await this.apis.mealRent_updata({
				id: row.id,
				status: row.status
			})
			this.$message({
				message: '操作成功！',
				type: 'success'
			})
		},
		elFormDetail(row) {
			console.log(row)
			Object.keys(this.formData).forEach(key => {
				this.formData[key] = row[key]
			})
			this.formData.id = row.id
			this.elFormVisible()
		},
		del(row) {
			this.$confirm(`删除当前这条数据`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				const res = await this.apis.mealRent_del({
					id: row.id
				})

				this.init()

				this.$message({
					message: '操作成功！',
					type: 'success'
				})
			})
		},
		Associated_devices_call() {
			this.Associated_devices_data.show = false
		}
	}
}
</script>
<style scoped lang="scss">
.el-icon-search {
	margin-right: 10px;
}
.Tip {
	margin-left: 20px;
}
</style>
